<!--
* @description:付款申请
* @fileName: PaymentRequest
* @author:石锦涛
* @date:2022-01-12
* @后台人员:石锦涛
-->
<template>
  <div>
    <!-- 付款申请 -->
    <el-row :span="1">
      <el-col :span="5">标题:</el-col>
      <el-col :span="10"
        ><el-input v-model="jieshu.Headline"></el-input
      ></el-col>
    </el-row>
    <br />
    <el-row :span="1">
      <el-col :span="5">付款金额:</el-col>
      <el-col :span="10"
        ><el-input v-model="jieshu.PaymentAmount"></el-input
      ></el-col>
    </el-row>
    <br />
    <el-row :span="1">
      <el-col :span="5">结算方式:</el-col>
      <el-col :span="10">
        <el-radio-group v-model="jieshu.ClearingForm">
          <el-radio label="微信支付">微信支付 </el-radio>
          <el-radio label="支付宝支付">支付宝支付</el-radio>
          <el-radio label="银联支付">银联支付 </el-radio>
          <el-radio label="企业转账">企业转账 </el-radio>
          <el-radio label="线下支付">线下支付 </el-radio>
          <el-radio label="其他">其他 </el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <br />
    <el-row :span="1">
      <el-col :span="5">支付对象:</el-col>
      <el-col :span="10"
        ><el-input v-model="jieshu.ObjectOfPayment"></el-input
      ></el-col>
    </el-row>
    <br />
    <el-row :span="1">
      <el-col :span="5">开户行:</el-col>
      <el-col :span="10"
        ><el-input v-model="jieshu.OpeningBank"></el-input
      ></el-col>
    </el-row>
    <br />
    <el-row :span="1">
      <el-col :span="5">银行账户:</el-col>
      <el-col :span="10"
        ><el-input v-model="jieshu.BankAccount"></el-input
      ></el-col>
    </el-row>
    <br />
    <el-row :span="1">
      <el-col :span="5">付款日期:</el-col>
      <el-col :span="10"
        ><el-input type="Date" v-model="jieshu.DateOfPayment"></el-input
      ></el-col>
    </el-row>
    <br />
    <el-row :span="1">
      <el-col :span="5">用途描述:</el-col>
      <el-col :span="10"
        ><el-input type="textarea" v-model="jieshu.UserDescribe"></el-input
      ></el-col>
    </el-row>
    <br />
    <el-row :span="1">
      <el-col :span="5">备注:</el-col>
      <el-col :span="10"
        ><el-input type="textarea" v-model="jieshu.Remarkm"></el-input
      ></el-col>
    </el-row>
    <br />
    <el-row :span="1">
      <el-col :span="5">票据附件:</el-col>
      <el-col :span="10">
        <el-upload
          class="avatar-uploader"
          action="https://localhost:44399/api/app/file-common-app/uplosdqiniu"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-col>
    </el-row>
    <br />
    <el-row :span="1">
      <el-col :span="3"><el-button @click="Ti()">提交审核</el-button></el-col>
      <el-col :span="1"><el-button @click="fanhui()">取消</el-button></el-col>
      <el-col :span="3">
        <el-button @click="addjiashu()">保存草稿</el-button></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jieshu: {
        ApplyNumber: "",
        Headline: "",
        PaymentAmount: "",
        ClearingForm: "",
        ObjectOfPayment: "",
        OpeningBank: "",
        BankAccount: "",
        DateOfPayment: "",
        UserDescribe: "",
        Remarkm: "",
        Accessory: "-",
        Proposer: "2",
        ApprovalStatusj: "0",
        Approverg: "-",
        IsDelete: "0",
      },
      imageUrl: "",
    };
  },
  methods: {
    //添加草稿
    addjiashu() {
      if (this.jieshu.Headline.length === 0) {
        alert("标题不能为空");
        return;
      }
      if (this.jieshu.PaymentAmount.length === 0) {
        alert("付款金额不能为空");
        return;
      }
      var retNum = /^\d+(\.\d+)?$/; //匹配数字匹配数字(包括小数)/^\d*$/
      if (!retNum.test(this.jieshu.PaymentAmount)) {
        alert("付款金额只能是正数,整数,小数");
        return;
      }
      if (this.jieshu.ClearingForm.length === 0) {
        alert("结算方式不能为空");
        return;
      }
      if (this.jieshu.ObjectOfPayment.length === 0) {
        alert("支付对象不能为空");
        return;
      }
      if (this.jieshu.OpeningBank.length === 0) {
        alert("开户行不能为空");
        return;
      }
      if (this.jieshu.BankAccount.length === 0) {
        alert("银行账户不能为空");
        return;
      }
      if (this.jieshu.DateOfPayment.length === 0) {
        alert("付款日期不能为空");
        return;
      }
      if (this.jieshu.UserDescribe.length === 0) {
        alert("用途描述不能为空");
        return;
      }
      if (this.jieshu.Remarkm.length === 0) {
        alert("备注不能为空");
        return;
      }
      this.$axios
        .post(
          "https://localhost:44399/api/app/payment-app/payment",
          this.jieshu
        )
        .then((res) => {
          if (res.data.Code > 0) {
            alert("添加成功");
            this.$router.push("/PaymentManagement");
          } else {
            alert("添加失败");
          }
        });

    },
  Ti(){
      let loginid=sessionStorage.getItem("Id");
      let loginname=sessionStorage.getItem("Account");
      this.$axios.post("https://localhost:44399/api/app/payment-shen/add-payment?loginname="+loginname+"&loginid="+loginid+"",this.jieshu).then(res=>{
        if(res.data>0)
        {
          this.$message.success("提交成功");
        }
        else
        {
          this.$message.error("提交失败");
        }
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.jieshu.Accessory = res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //返回管理
    fanhui() {
      this.$router.push("/PaymentManagement");
    },
  },
  created() {},
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>